<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市区三级联动</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/axios-0.18.0.js" type="text/javascript"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">
    省：
    <!--<el-select v-model="value" placeholder="请选择">-->
        <!--<el-option-->
                <!--v-for="item in options"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
        <!--</el-option>-->
    <!--</el-select>-->
    <el-select v-model="provinceCode" placeholder="省份">
        <el-option
                v-for="item in AddressProvince"
                :value="item.name"
        ></el-option>
    </el-select>
    市：
    <el-select v-model="cityCode" placeholder="城市">
        <el-option
                v-for="item in AddressCity"
                :value="item.name"
        ></el-option>
    </el-select>
    区：
    <el-select v-model="value" placeholder="区域">
        <el-option
                v-for="item in AddressTown"
                :value="item.name"
        ></el-option>

    </el-select>
</div>

</body>
<script>
    new Vue ({
        el:"#app",
        name: 'HelloWorld',
        data:{

                AddressCity: [],
                AddressProvince: [],
                AddressTown: [],
                provinceCode: '',
                cityCode: '',
                value: ''

        },
        watch: {//监控一个值的变换
            provinceCode: { //
                handler () {
                    this.AddressCity = [];
                    this.AddressTown = [];
                    this.cityCode = "";
                    this.value = "";
                    this.findByprovinceCode();
                }
            },
            cityCode: {//
                handler () {
                    this.findBycityCode();
                }
            }
        },
        created () {
            this.init();
        },
        methods: {
            handleChange (value) {
                console.log(value);
            },
            init () {
                let app = this;
                axios.get("http://localhost:8080/queryCity?region=100000").then(resp => {
                    // handle success
                    app.AddressProvince = resp.data;
                })
                    .catch(function (error) {
                        // handle error
                        console.log(error);
                    });
            },

            findByprovinceCode () {
                alert(this.provinceCode+"99")
                let app = this;

                axios.get("http://localhost:8080/queryCity?region=" ).then(resp => {
                    // handle success
                    app.AddressCity = resp.data;
                })
                    .catch(function (error) {
                        // handle error
                        console.log(error);
                    });
            },
            findBycityCode () {

                let app = this;
                axios.get("http://localhost:8080/town/" + app.cityCode).then(resp => {
                    // handle success
                    // app.provinceCode = '';
                    // app.cityCode = '';
                    app.AddressTown = resp.data;

                })
                    .catch(function (error) {
                        // handle error
                        console.log(error);
                    });
            },
        }
    })
</script>
</html>